<template>
  <div >
    <el-container >
      <el-main>
        <el-row style="width: 100%" :gutter="40">
          <el-col :span="6" class="crow">
            <div style="background:rgb(49, 180, 141);" class="citem">
              <div>二手房源</div>
              <div><h2 style="font-weight: bold">{{oldhousecount}}</h2></div>
              <div style="font-size: 12px;">当前供应商总记录数</div>
            </div>
          </el-col>
          <el-col :span="6" class="crow">
            <div style="background:rgb(56, 161, 242);" class="citem">
              <div>楼盘总数</div>
              <div><h2 style="font-weight: bold">{{newhousecount}}</h2></div>
              <div style="font-size: 12px;">当前员工总记录数</div>
            </div>
          </el-col>
          <el-col :span="6" class="crow">
            <div style="background:rgb(117, 56, 199);" class="citem">
              <div>出租房源</div>
              <div><h2 style="font-weight: bold">{{renthousecount}}</h2></div>
              <div style="font-size: 12px;">当前出库总记录数</div>
            </div>
          </el-col>
          <el-col :span="6" class="crow">
            <div style="background:rgb(59, 103, 164);" class="citem">
              <div>本月看房</div>
              <div><h2 style="font-weight: bold">{{renthousecount}}</h2></div>
              <div style="font-size: 12px;">当前入库总记录数</div>
            </div>
          </el-col>
          <el-col :span="6" class="crow">
            <div style="background:#E6A23C;" class="citem">
              <div>看房请求</div>
              <div><h2 style="font-weight: bold;">{{requestTotal}}</h2></div>
              <div style="font-size: 12px;">待处理看房请求</div>
            </div>
          </el-col>
          <el-col :span="6" class="crow">
            <div style="background:#F56C6C;" class="citem">
              <div>举报房源</div>
              <div><h2 style="font-weight: bold">{{reportTotal}}</h2></div>
              <div style="font-size: 12px;">待处理举报房源</div>
            </div>
          </el-col>
          <el-col :span="6" class="crow">
            <div style="background:#0066cc;" class="citem">
              <div>本月成交额</div>
              <div><h2 style="font-weight: bold">{{reportTotal}}</h2></div>
              <div style="font-size: 12px;">本月成交额</div>
            </div>
          </el-col>

        </el-row>
      </el-main>
    </el-container>
    <el-container>
      <el-main>

        <!--<el-col :md="24" :sm="24">
          <div id="test" :style="{width: '100%', height: '300px'}"></div>
        </el-col>-->
        <h3>可租房源分布图</h3>
        <baidu-map style="width: 100%;height: 900px" :center="center" ak="rentHouseMap" :zoom="12" :scroll-wheel-zoom="true" @ready="handler">
          <my-overlay v-for="(item,i) in rentHouseMap" :key="i"
                      :position="item.center"
                      :address="item.address"
                      :count="item.count"
                      :active="item.active"
                      @mouseover.native="item.active = true"
                      @mouseleave.native="item.active = false">
          </my-overlay>
        </baidu-map>
        <el-col :md="24" :sm="24">
          <div id="newHouseCount" :style="{width: '100%', height: '300px'}"></div>
        </el-col>
        <el-col :md="24" :sm="24">
          <div id="oldHouseCount" :style="{width: '100%', height: '300px'}"></div>
        </el-col>
        <el-col :md="24" :sm="24">
          <div id="rentHouseCount" :style="{width: '100%', height: '300px'}"></div>
        </el-col>
      </el-main>
    </el-container>


  </div>

</template>

<script>
  import MyOverlay from '@/components/BaiduMap/MyOverlay'
  import oldhouseApi from '@/api/oldhouse'
  import newhouseApi from '@/api/newhouse'
  import resourceApi from '@/api/resource'
  import requestApi from '@/api/request'
  import reportApi from '@/api/report'
  import statisticApi from '@/api/statistic'
  import areaApi from '@/api/area'
    export default {
      name: 'dashboard',
      components:{
        MyOverlay
      },
      data() {
        return {
          center:  {lng: 116.404, lat: 39.915},
          //center:'太原',
          zoom: 4,
          renthousecount:'',
          newhousecount:'',
          oldhousecount:'',
            requestTotal:'',
            reportTotal:'',
          keyword: '',
          location: '北京',
          rentHouseMap:[
          ],
          newHouseCountOption: {
            color:["#0066cc"],
            title: { text: '楼盘统计' },
            tooltip: {},
            xAxis: {
              data: []
            },
            yAxis: {},
            series: [{
              name: '数量',
              type: 'bar',
              data: []
            }]
          },
          oldHouseCountOption: {
            color:["#0066cc"],
            title: { text: '二手房统计' },
            tooltip: {},
            xAxis: {
              data: []
            },
            yAxis: {},
            series: [{
              name: '数量',
              type: 'bar',
              data: []
            }]
          },
          rentHouseCountOption: {
            color:["#0066cc"],
            title: { text: '可租房源' },
            tooltip: {},
            xAxis: {
              data: []
            },
            yAxis: {},
            series: [{
              name: '数量',
              type: 'bar',
              data: []
            }]
          }
        }
      },
      created() {
        this.countnewhouse()
        this.countOldHose()
        this.countrenthouse()
        this.initChartData()
        this.initRentHouseMap()
          this.countrequest()
          this.countreport()
      },
      mounted() {
        this.initNewHouseChart()
        this.initOldHouseChart()
        this.initRentHouseChart()
        //this.drawLine()
      },
      methods: {
        initNewHouseChart() {
          const newHouseCount = this.$echarts.init(document.getElementById('newHouseCount'))
          newHouseCount.setOption(this.newHouseCountOption,true)
        },
        initOldHouseChart() {
          const oldHouseCount = this.$echarts.init(document.getElementById('oldHouseCount'))
          oldHouseCount.setOption(this.oldHouseCountOption,true)
        },
        initRentHouseChart() {
          const rentHouseCount = this.$echarts.init(document.getElementById('rentHouseCount'))
          rentHouseCount.setOption(this.rentHouseCountOption,true)
        },
        drawLine() {
          const test = this.$echarts.init(document.getElementById('test'))
          test.setOption({
            color:["#0066cc"],
            title: { text: '二手房价走势' },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
            }]
          })
        },
        handler({ BMap, map }) {
          console.log(BMap, map)
          console.log(this.rentHouseMap)
          this.zoom = 15
        },
        draw ({el, BMap, map}) {
          const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 139.915))
          el.style.left = pixel.x - 60 + 'px'
          el.style.top = pixel.y - 20 + 'px'
        },
        getPosition (e) {
          alert(`${e.point.lng} / ${e.point.lat}`)
        },
        countOldHose() {
          oldhouseApi.count().then(response=>{
            this.oldhousecount = response.data
          })
        },
        countnewhouse() {
          newhouseApi.count().then(response=>{
            this.newhousecount = response.data
          })
        },
        countrenthouse() {
          resourceApi.count().then(response=>{
            this.renthousecount = response.data
          })
        },
        countrequest() {
            var map = {
                status: '未处理'
            }
            requestApi.searchMap(map).then(response=>{
                this.requestTotal = response.data.length
            })
        },
        countreport() {
            var map = {
                status: '未处理'
            }
            reportApi.searchMap(map).then(response=>{
                this.reportTotal = response.data.length
            })
        },
        initChartData() {
          statisticApi.renthousecount().then(response=>{
            var data = response.data;
            var _this = this;
            for (var i = 0;i<data.length;i++) {
              _this.rentHouseCountOption.xAxis.data.push(data[i].city)
              _this.rentHouseCountOption.series[0].data.push(data[i].count)
            }
            if (response.flag)  {
              this.initRentHouseChart()
            }
          })
          statisticApi.newhousecount().then(response=>{
            var data = response.data;
            var _this = this;
            for (var i = 0;i<data.length;i++) {
              _this.newHouseCountOption.xAxis.data.push(data[i].city)
              _this.newHouseCountOption.series[0].data.push(data[i].count)
            }
            if (response.flag)  {
              this.initNewHouseChart()
            }
          })
          statisticApi.oldhousecount().then(response=>{
            var data = response.data;
            var _this = this;
            for (var i = 0;i<data.length;i++) {
              _this.oldHouseCountOption.xAxis.data.push(data[i].city)
              _this.oldHouseCountOption.series[0].data.push(data[i].count)
            }
            if (response.flag)  {
              this.initOldHouseChart()
            }
          })
        },
        initRentHouseMap(){
          statisticApi.renthousemapCounty().then(response=>{
            this.rentHouseMap = response.data
          })
          console.log(this.rentHouseMap)
        }


      }
    }
</script>

<style scoped>
  .app-main{
    margin: 0px;
    background: #f0f2f5;
  }
  .sample {
    width: 100px;
    height: 100px;
    line-height: 40px;
    border-radius: 50%;
    background: rgba(0, 102, 204,0.9);
    overflow: hidden;
    box-shadow: 0 0 5px #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: absolute;
  }
  .sample.active {
    background: rgba(0,0,0,0.75);
    color: #fff;
  }
  .crow{
    padding: 20px;
    color: #fff;

  }
  .citem{
    border-radius: 4px;
    height: 144px;
    padding: 20px
  }
</style>
